<template>
	<view class="subject-selector">
		<view 
			class="subject-item" 
			v-for="subject in subjects" 
			:key="subject.id" 
			:class="{ active: selectedSubject === subject.name }"
			@click="handleSubjectClick(subject)"
		>
			<view class="subject-icon" :class="subject.color">
				<text class="subject-icon-text">{{ subject.icon }}</text>
			</view>
			<text class="subject-name">{{ subject.name }}</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SubjectSelector',
	props: {
		// 当前选中的科目
		selectedSubject: {
			type: String,
			default: '全科'
		},
		// 科目列表数据
		subjects: {
			type: Array,
			default: () => [
				{ id: 1, name: '全科', icon: '🔲', color: 'cyan' },
				{ id: 2, name: '语文', icon: '📖', color: 'orange' },
				{ id: 3, name: '英文', icon: '📚', color: 'yellow' },
				{ id: 4, name: '数学', icon: '🔢', color: 'purple' },
				{ id: 5, name: '政治', icon: '⭐', color: 'red' },
				{ id: 6, name: '地理', icon: '🌍', color: 'blue' },
				{ id: 7, name: '历史', icon: '🏛️', color: 'brown' },
				{ id: 8, name: '化学', icon: '⚡', color: 'light-blue' },
				{ id: 9, name: '物理', icon: '🧪', color: 'teal' },
				{ id: 10, name: '生物', icon: '🧬', color: 'green' }
			]
		}
	},
	methods: {
		handleSubjectClick(subject) {
			// 向父组件发送点击事件
			this.$emit('subject-change', subject);
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@text-light: #666;
@white: #fff;

.subject-selector {
	display: flex;
	gap: 16rpx;
	margin-bottom: 20rpx;
	overflow-x: auto;

	.subject-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		flex-shrink: 0;
		cursor: pointer;
		transition: all 0.2s;

		&.active .subject-name {
			color: @primary-color;
			font-weight: bold;
		}

		&:active {
			transform: scale(0.95);
		}

		.subject-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&.cyan { background: @primary-color; }
			&.orange { background: #FF9800; }
			&.yellow { background: #FFC107; }
			&.purple { background: #9C27B0; }
			&.red { background: #F44336; }
			&.blue { background: #2196F3; }
			&.brown { background: #8D6E63; }
			&.light-blue { background: #03A9F4; }
			&.teal { background: #009688; }
			&.green { background: #4CAF50; }

			.subject-icon-text {
				font-size: 24rpx;
				color: @white;
			}
		}

		.subject-name {
			font-size: 22rpx;
			color: @text-light;
			transition: all 0.2s;
		}
	}
}
</style>
